<script>
/**
 * @desc 修改账户信息页面,包括用户绑定的身份证,护照,手机号码等
 */

import { createNamespacedHelpers } from 'vuex'
import uncheckedIco from '@/assets/icons/unchecked.svg'
import checkedIco from '@/assets/icons/checked.svg'

const { mapState, mapActions } = createNamespacedHelpers('SignIn')

export default {
  name: 'account-info',
  data: () => ({
    name: '',
    mobile: '',
    identityType: '',
    identityNumber: '',
    loading: false,
    uncheckedIco,
    checkedIco
  }),
  computed: { ...mapState(['userInfo']) },
  methods: {
    ...mapActions(['updateInfo']),
    handleTypeChange(e) {
      this.identityType = e.mp.detail.value
    },
    handleSubmit(e) {
      if (this.loading) {
        return
      }
      if (e.mp && e.mp.detail.value) {
        const { name, mobile, identityType, identityNumber } = e.mp.detail.value
        if (name && mobile && identityType && identityNumber) {
          this.loading = true
          wx.showLoading({ title: '更新中...', mask: true })
          this.updateInfo({ name, mobile, identityType, identityNumber })
            .then(() => {
              this.loading = false
              wx.hideLoading()
              wx.navigateBack()
            })
            .catch(() => {
              this.loading = false
              wx.hideLoading()
              wx.showModal({ title: '提示', content: '更新失败,请重试', showCancel: false })
            })
        } else {
          wx.showModal({ title: '提示', content: '请先完成表单', showCancel: false })
        }
      }
    }
  },

  onLoad() {
    // init
    this.name = this.userInfo.name
    this.mobile = this.userInfo.mobile
    this.identityType = this.userInfo.identityType
    this.identityNumber = this.userInfo.identityNumber
  }
}
</script>

<template>
  <form class="account-info" @submit="handleSubmit">
    <div class="form-item">
      <span class="title">姓名:</span>
      <input type="text" name="name" class="val input" :value="name" placeholder="请输入姓名" maxlength="10"/>
    </div>

    <div class="form-item">
      <span class="title">手机:</span>
      <input type="number" name="mobile" class="val input" :value="mobile" placeholder="请输入11位手机号" maxlength="11"/>
    </div>

    <div class="form-item">
      <span class="title">证件类型:</span>
      <radio-group class="val" name="identityType" @change="handleTypeChange">
        <label class="radio-item">
          <span>身份证</span>
          <img :src="identityType=='1'?checkedIco:uncheckedIco" class="radio-check">
          <radio class="radio-input" value="1" :checked="identityType=='1'"/>
        </label>
        <label class="radio-item">
          <span>护照</span>
          <img :src="identityType=='2'?checkedIco:uncheckedIco" class="radio-check">
          <radio class="radio-input" value="2" :checked="identityType=='2'"/>
        </label>
      </radio-group>
    </div>

    <div class="form-item">
      <span class="title">证件号码:</span>
      <input type="text" name="identityNumber" class="val input" :value="identityNumber" placeholder="请输入与证件类型相符的号码" maxlength="18"/>
    </div>

    <button formType="submit" class="submit-btn">修改</button>
  </form>
</template>

<style lang="scss" scoped>
@import './styles.scss';
</style>
